<template>
    <div class="common-layout">
        <el-container>
            <el-header height="120px" class="mobile-header">
                <Header></Header>
            </el-header>
            <el-main class="mobile-main">
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts" name="level">
import Header from '@/components/Header.vue';
</script>

<style scoped>
.el-container {
    height: 100vh;
}

.el-header {
    --el-header-padding: 0;
    padding: 0;
}

.el-main {
    --el-main-padding: 20px 0;
    padding-bottom: 0;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .mobile-header {
        height: auto !important;
    }

    .mobile-main {
        padding: 10px !important;
    }

    :deep(.el-card) {
        margin-bottom: 10px;
    }

    :deep(.el-table) {
        width: 100%;
        overflow-x: auto;
    }

    :deep(.el-form-item) {
        margin-bottom: 15px;
    }

    :deep(.el-form-item__label) {
        float: none;
        display: block;
        text-align: left;
        padding: 0 0 8px;
    }

    :deep(.el-form-item__content) {
        margin-left: 0 !important;
    }

    :deep(.el-dialog) {
        width: 90% !important;
        margin: 0 auto !important;
    }
}
</style>